window.addEventListener('load',function(){
    var focus = document.querySelector('.focus');
    var ul=focus.children[0];
    var ol=focus.children[1];
    var w=focus.offsetWidth;
    var index=0;
    var timer=setInterval(function(){
        index++;
        var transformX=-index*w;
        ul.style.transition='All .3s';
        ul.style.transform='translateX('+transformX+'px)';
    },2000);

    ul.addEventListener('transitionend',function(){
        if(index>=3){
            ul.style.transition='none';
            index=0;
            var transformX=-index*w;
            ul.style.transform='translateX('+transformX+'px)';
        }else if(index<0){
            ul.style.transition='none';
            index=2;
            var transformX=-index*w;
            ul.style.transform='translateX('+transformX+'px)';
        }
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    })
    var startX=0;
    var moveX=0;
    var flag=false;
    ul.addEventListener('touchstart',function(e){
        startX=e.targetTouches[0].pageX;
        clearInterval(timer);
        flag=true;
    })
    ul.addEventListener('touchmove',function(e){
        moveX=e.targetTouches[0].pageX-startX;
        ul.style.transition='none';
        var transformX=-index*w+moveX;
        ul.style.transform='translateX('+transformX+'px)';
        e.preventDefault();
    })

    ul.addEventListener('touchend',function(e){
        if(flag==true){
            if(Math.abs(moveX)>50){
                moveX>0?index--:index++;
                ul.style.transition='All .3s';
                var transformX=-index*w;
                ul.style.transform='translateX('+transformX+'px)';
            }else{
                ul.style.transition='All .1s';
                var transformX=-index*w;
                ul.style.transform='translateX('+transformX+'px)';
            }
            clearInterval(timer);
            timer=setInterval(function(){
                index++;
                var transformX=-index*w;
                ul.style.transition='All .3s';
                ul.style.transform='translateX('+transformX+'px)';
            },2000);
        }
        flag=false;
    })
    var nav=document.querySelector('nav');
    var goBack=document.querySelector('.goBack');
    window.addEventListener('scroll',function(){
        if(window.pageYOffset>=nav.offsetTop){
            goBack.style.display='block';
        }else{
            goBack.style.display='none';
        }
    })

    goBack.addEventListener('click',function(){
         window.scroll(0,0);
    })
})